<template>
  <div id="login" class="relative">
    <div class="form center-absolute">
      <div class="title text-center padding">
        <img src="../../assets/images/logo-auth.png" style="" alt="">
      </div>
      <!-- <div class="padding text-center">
        <input type="text" v-model="username"
        @input="handleInput" class="pwd input-none text-center">
      </div> -->
      <div class="padding text-center">
        <input type="password" v-model="password"
        @input="handleInput" class="pwd input-none text-center"
        @keydown.enter="login">
      </div>
      <div class="login-btn padding cursor text-center" @click="login" style="margin-top: 5px;">
        {{btnText}}
      </div>
      <div class="info padding text-center" style="color: red;">{{notice}}</div>
    </div>
    <div class="footer text-center">
      <span v-for="(item, idx) in info" class="blockItem">
        {{item.label}}: {{item.value}}
      </span>
    </div>
  </div>
</template>

<script>
  import changeLang from '@/utils/common/changeLang'
  export default {
    name: 'login',
    data(){
      return {
        // 底部webMsgInfo的label
        info: this.$t('login.info'),
        username: '',
        password: "",
        notice: '',
        uptimer: null,
      }
    },
    computed: {
      btnText(){
        return this.$t('btn.login')
      }
    },
    watch: {
      localStorage: {
        deep: true,
        handler(newV, oldV){
          console.dir('ok')
        }
      },
    },
    methods: {
      async login(){
        // if(this.$i18n.locale == 'zh') {
        //   changeLang('en')
        // } else {
        //   changeLang('zh')
        // }
        this.notice = this.$t('notification.loginPending')
        this.$store.dispatch('user/login', { username: 'root', password: this.password }).then(
          res => {
            this.$router.replace(this.$route.query.redirect || '/')
          },
          // err=> { console.log(err); this.notice = this.$t('login.notice.err') }
        ).catch(err=> {
          if(err.code == "-4"){
            this.$router.push('/')
            console.log(err);
            this.notice = this.$t(`notification.pwderr`)
            return
          } else if (err.code == 10) {
            this.notice = this.$t("notification.neterr")
          }
        })
        // await this.axios.get(`/os/webapi?op=login&username=username&password=${this.password}`).
        // then(res=> { console.log(res), err=> { console.log(err); this.notice = this.$t('login.notice.err')}})
        // await this.$get('/os/webapi?op=login', {username: 'admin', password: this.password}).
        // then(res=> { console.log(res) }, err=> { console.log(err) })
      },
      handleInput(){
        this.notice = ''
      },
      get_web_msg(){
          this.$req.get('/webapi?op=get_web_msg').then(res => {
            console.log(res)
            let { board, sysversion, uptime } = res.data
            this.info[0].value = sysversion
            this.info[2].value = board
            this.uptimer = setInterval(()=> {
              uptime++
              let time = this.formatDuration(uptime)
              // let day, hour, minute, second;
              // if(localStorage.getItem('lang') == 'zh'){
              // if(this.$i18n.locale == 'zh'){
              //   let day = time.day ? time.day + '天' : ''
              //   let hour = time.hour ? time.hour + '小时' : ''
              //   let minute = time.minute ? time.minute + '分钟' : ''
              //   let second = time.second < 10 ? '0' + time.second + '秒' : time.second + '秒'
              //   time = day + hour + minute + second
              // } else if(this.$i18n.locale == 'en'){
              //   time = Object.entries(time)
              //     .filter(val => val[1] !== 0)
              //     .map(([key, val]) => `${val} ${key}${val !== 1 ? 's' : ''}`)
              //     .join('');
              // } else {
              //   // TODO 繁体运行总时间格式化显示
              // }
              this.info[1].value = time
            }, 1000)
          })
        }
    },
    created(){
      this.get_web_msg()
    },
    beforeDestryed(){
      clearInterval(this.uptimer)
    }
  }
</script>

<style lang="scss" scoped>
  #login {
    height: 100%;
    background-image: linear-gradient(to bottom, #343756, #4a4a73);
    .form{
      width: 500px;
      height: 250px;
      max-width: 100%;
      .padding{
        padding: 15px 0;
      }
      .pwd{
        width: 219px;
        border-color: #f9f3f6;
        font-size: 18px;
        line-height: 30px;
        margin: 0 auto;
        display: block;
        color: #858585;
        padding: 5px 6px;
        border-radius: 5px;
        background: #fff;
        text-align: center;
        border: 1px solid #999;
      }
      .login-btn{
        font-size: 16px;
        line-height: 22px;
        color: #fff;
        background-color: $primary;
        width: 219px;
        box-sizing: border-box;
        display: block;
        margin: 0 auto;
        padding: 9px 30px;
        border-radius: 5px;
        font-weight: normal;
        &:active{
          opacity: .8;
        }
      }
    }
    .footer{
      position: absolute;
      bottom: 0;
      min-height: 60px;
      width: 100%;
    }
  }
  @media screen and (min-width: 800px) {
    .footer{
      line-height: 60px;
      .blockItem{
        padding-right: 10px;
      }
    }
  }
  @media (max-width: 800px) {
    .blockItem{
      display: block;
      line-height: 20px;
      &:last-child{
        margin-top: 20px;
      }
    }
  }


</style>
